<template>
    <div>
        <el-row>
            <el-col class="head" :span="24">
                <el-col :span="12"><i @click="collapse" class="el-icon-menu"></i></el-col>     
                <el-col :span="12">
                    <el-dropdown class="user" trigger="click" @command="handleCommand">
                        <div class="el-dropdown-link">
                            <el-col :span="8" class="img">
                                <el-avatar :size="40" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                            </el-col>
                            <el-col :span="11" class="introduce">
                                <p>张三</p>
                                <p>管理员</p>
                            </el-col>
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </div>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item icon="el-icon-user-solid" command="user">个人中心</el-dropdown-item>
                        <el-dropdown-item icon="el-icon-s-tools" command="settings">账号设置</el-dropdown-item>
                        <el-dropdown-item icon="el-icon-switch-button" command="logout" divided>退出</el-dropdown-item>
                    </el-dropdown-menu>
                    </el-dropdown>
                </el-col>     
            </el-col>
            <el-col class="main" :span="24">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item v-show="$route.meta.title !== '首页'" :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item >{{$route.meta.title}}</el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {logout} from '@/api/login'
export default {
    props: {
        
    },
    methods: {
        /* 点击压缩菜单 */
        collapse() {
            this.$emit("collapse")
        },
        /* 下拉菜单点击 */
        handleCommand(command) {
            switch (command) {
                case 'user':
                    this.$message('进入个人中心')
                    break;
                case 'settings':
                    this.$message('进入账号设置')
                    break;
                case 'logout':
                    // 退出
                    logout(localStorage.getItem('bopu-upms-token')).then(Response => {
                        const resp = Response.data
                        
                        if (resp.flag) {
                            // 退出登录
                            // 清空本地数据
                            localStorage.removeItem('bopu-upms-token');
                            localStorage.removeItem('bopu-upms-user');
                            // 回到登录页面
                            this.$router.push({path: '/login'})
                        } else {
                            this.$message({
                                message: resp.message,
                                type: 'warning'
                            })
                        }
                    })
                    break;
            }
        },
    },
}
</script>

<style lang="scss" >
    /* 头部组件上部分 */
    .head {
        height: 60px;
        background-color: #fff;

        /* 压缩菜单按钮样式 */
        .el-icon-menu {
            color: #c8c8c8;
            font-size: 30px;
            margin-top: 15px;
            margin-left: 15px;
            cursor: pointer;
        }
        /* 用户部分获取焦点样式 */
        .user:hover {
            border: 1px solid #00D9D9;
        }
        /* 用户信息部分 */
        .user {
            margin-top: 5px;
            margin-right: 20px;
            height: 50px;
            width: 160px;
            float: right;
            /* 头像样式 */
            .img {
                margin-top: 5px;
                margin-left: 8px;
            }
            /* 用户名称 */
            .introduce {
                margin-top: 7px;

                p {
                    margin: 0;
                }
                p:first-child {
                    font-size: 14px
                }
                p:last-child {
                     font-size: 12px;
                     color: #ACACAC;
                }
            }
            /* 下拉样式 */
            .el-icon-arrow-down {
                margin-top: 15px;
                margin-right: 5px;
            }
        }
    }
    /* 下拉菜单宽度 */
    .el-dropdown-menu {
        min-width: 160px;
    }
    .main {
        height: 50px;
        background-color: #3BBFB4;

        .el-breadcrumb {
            margin-top: 18px;
            margin-left: 10px;
            font-size: 15px;
            

            /* 面包屑字体样式 */
            .el-breadcrumb__inner {
                color: #FFF !important;
                font-weight: bold  !important;
                a {
                    color: #FFF !important;
                    font-weight: bold  !important;
                }
            }
            /* 面包屑分割符颜色 */
            .el-breadcrumb__separator {
                color: #FFF !important;
            }
        }

    }
   
</style>